<template>
  <div>
    <div class="home">
      <div class="center-box">
        <!-- 轮播图 -->

        <swiper ref="mySwiper" :options="swiperOption" >
          <swiper-slide>
            <router-link to="/goods">
              <img src="/download.jpg" alt="" />
            </router-link>
          </swiper-slide>
          <swiper-slide>
            <router-link to="/goods">
              <img src="/d701e8be66f26e5976bfed83d4c58d5b.jpg" alt="" />
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- 中间内容 -->
        <div class="home-box">
          <div class="home-cate">
            <a href="#1">
              <img
                src="../assets/img/home/889439561ba83c8ce1cdb960f0e90cf1.jpg"
                alt="新品"
                title="新品"
              />
            </a>
            <a href="#2">
              <img
                src="../assets/img/home/85b21a9105c4cd50d4993e8e44d31af3.jpg"
                alt="生日"
                title="生日"
              />
            </a>
            <a href="#3">
              <img
                src="../assets/img/home/2b0753c02bc2ae83b3cc03e9c81d9e0b.jpg"
                alt="儿童"
                title="儿童"
              />
            </a>
            <a href="#4">
              <img
                src="../assets/img/home/66a9e99bfc4043389492e86e651cdf21.jpg"
                alt="聚会"
                title="聚会"
              />
            </a>
            <a href="#5">
              <img
                src="../assets/img/home/37752f6805d166b02e011c3b5c3b4972.png"
                alt="活动专区"
                title="活动专区"
              />
            </a>
          </div>
         
            <div class="home-module" id="1" v-for="(data,index) in array" :key="index">
            <div class="home-title">
              <span>{{ data.title }}</span>
              <span>/</span>
              <span>专区</span>
            </div>
            <div class="banner">
              <router-link to="/tagnews">
                <img :src="`http://localhost:3000/${data.banner}`" alt="" />
              </router-link>
            </div>
           
               <ul class="list-box" >
              <li  v-for="(item,index) in data.text" :key="index">
                <router-link to="/goods">
                  <img :src="`http://localhost:3000/${item.image}`" alt="" />
                  <h6>{{ item.special_title }}</h6>
                  <p>{{ item.special_subtitle }}</p>
                </router-link>

                <div class="tag-list">
                  <a href="">情侣></a>
                  <a href="">{{ item.tags }}></a>
                </div>
                <div class="cart">
                  <span
                    >¥{{ item.price }}/{{ item.weight }}g({{
                      item.spec
                    }})</span
                  >
                  <span>加入购物车</span>
                </div>
              </li>
             
            </ul>
            </div>
       
          
          <div class="home-module" id="5">
            <div class="home-title">
              <div>
                <h4>廿一客</h4>
                <span>/</span>
                <span>文章</span>
              </div>
              <span class="home-max">
                <router-link to="/magazine">查看更多 ></router-link>
              </span>
            </div>
            <ul class="main">
              <li v-for="(item,index) in data" :key="index">
                <img
                  :src="`http://localhost:3000/${item.banner}`"
                  alt=""
                />
                <div>
                  <h4>{{item.name}}</h4>
                  <router-link to="/detail">
                    <span>阅读全文>></span>
                  </router-link>
                </div>
              </li>
            </ul>
          </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 鼠标进入时,触发
    stopSwiper() {
      // console.log('鼠标进入..')
      // 任务: 调用 swiper 组件的 autoplay属性的stop方法

      // 用 ref 设置的变量, 存储在固定的 $refs 属性里
      // console.log('$refs:', this.$refs)
      this.$refs.mySwiper.$swiper.autoplay.stop();
    },
    // 鼠标离开时,触发
    startSwiper() {
      this.$refs.mySwiper.$swiper.autoplay.start();

      // console.log('鼠标离开..')
    },
 
  


    
  },
  data() {
    return {
      array:null,
      data:'',
      swiperOption: {
        loop: true,
        effect: "slide",
        grabCursor: true,
        centeredSlides: true,
        spaceBetween: 20,
        initialSlide: 2,
        setWrapperSize: true,
        momentum: false,
        // slidesPerView :1,
        autoplay: {
          delay: 8000, //间隔时间
          // 当用户操作swiper之后停止自动滚动: 此设定为假
          disableOnInteraction: false,
        },
      },
    };
  },

  mounted() {
    //请求首页文章
    this.axios.get('/pro/article').then(res=>{
      console.log(res);
      this.data = res.data.data
    })
    //请求专区接口
    this.axios.get('/pro/product').then((res) => {
     
      //console.log(res);
      let items = res.data.data
     // console.log(items);
      let data = []
      let resdata= []
      for(let i =0 ; i<items.length;i++){
        if(data.indexOf(items[i].title) == -1){
          resdata.push({
            title:items[i].title,
            banner:items[i].banner,
            text:[items[i]]
          })
          data.push(items[i].title,items[i].banner)
        }else{
          for(let j = 0;j< resdata.length;j++){
            if(resdata[j].title == items[i].title){
              resdata[j].text.push(items[i])
              break
            }
          }
        }
      }
     // console.log('resdata',resdata);
      this.array = resdata
     // console.log(this.array);
    })
    
  
  },
};
</script>
<style scoped src="../assets/css/home.css"></style>

<style lang="scss" scoped>

</style>
